<template>
  <BaseModal
      :visible="visible"
      :title="title"
      :draggable="true"
      :width="'500px'"
      @close="closeDialog"
      @cancel="closeDialog"
      @confirm="saveStorage"
  >
    <template #default>
      <div class="form-group">
        <label class="form-label">存储键</label>
        <input
            type="text"
            v-model="editKey"
            class="form-input"
            placeholder="输入存储键名"
        >
      </div>

      <div class="form-group">
        <label class="form-label">存储值</label>
        <textarea
            v-model="editValue"
            class="form-textarea"
            placeholder="输入存储值"
            rows="5"
        ></textarea>
      </div>

      <div class="form-group">
        <label class="form-label">存储类型</label>
        <div class="radio-group">
          <label class="radio-option">
            <input
                type="radio"
                v-model="storageType"
                value="local"
            >
            <span class="radio-custom"></span>
            <span class="radio-label">localStorage</span>
          </label>
          <label class="radio-option">
            <input
                type="radio"
                v-model="storageType"
                value="session"
            >
            <span class="radio-custom"></span>
            <span class="radio-label">sessionStorage</span>
          </label>
        </div>
      </div>
    </template>

    <template #footer>
      <button class="danger-btn" @click="deleteStorage" v-if="isEditMode">
        <i class="icon-delete"></i> 删除
      </button>
    </template>
  </BaseModal>
</template>

<script setup>
import { ref, watch } from 'vue'
import BaseModal from './BaseModal.vue'

const props = defineProps({
  visible: { type: Boolean, default: false },
  title: { type: String, default: '编辑存储数据' },
  storageItem: {
    type: Object,
    default: () => ({ key: '', value: '', type: 'local' })
  },
  isEditMode: {
    type: Boolean,
    default: false
  }
})

const emit = defineEmits(['save', 'delete', 'close'])

const editKey = ref(props.storageItem.key || '')
const editValue = ref(props.storageItem.value || '')
const storageType = ref(props.storageItem.type || 'local')

const saveStorage = () => {
  if (!editKey.value.trim()) {
    alert('请输入有效的键名')
    return
  }

  emit('save', {
    key: editKey.value,
    value: editValue.value,
    type: storageType.value
  })
}

const deleteStorage = () => {
  if (confirm('确定要删除此存储项吗？')) {
    emit('delete', {
      key: editKey.value,
      type: storageType.value
    })
  }
}

const closeDialog = () => {
  emit('close')
}

watch(() => props.storageItem, (newVal) => {
  editKey.value = newVal.key || ''
  editValue.value = newVal.value || ''
  storageType.value = newVal.type || 'local'
})
</script>

<style scoped>
*{
  box-sizing: border-box;
}
.form-group {
  margin-bottom: 20px;
}

.form-label {
  display: block;
  margin-bottom: 8px;
  font-size: 0.95rem;
  color: var(--text-secondary);
}

.form-input,
.form-textarea {
  width: 100%;
  padding: 10px 15px;
  background: var(--bg-light);
  border: 1px solid var(--border-color);
  border-radius: 6px;
  color: var(--text-primary);
  font-family: inherit;
}

.form-textarea {
  min-height: 100px;
  resize: vertical;
}

.radio-group {
  display: flex;
  gap: 15px;
  margin-top: 10px;
}

.radio-option {
  display: flex;
  align-items: center;
  cursor: pointer;
  font-size: 0.9rem;
}

.radio-option input[type="radio"] {
  position: absolute;
  opacity: 0;
}

.radio-custom {
  width: 16px;
  height: 16px;
  border: 2px solid var(--border-color);
  border-radius: 50%;
  margin-right: 8px;
  position: relative;
  transition: var(--transition);
}

.radio-option input:checked + .radio-custom {
  border-color: var(--primary-color);
}

.radio-option input:checked + .radio-custom::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--primary-color);
}

.danger-btn {
  padding: 8px 16px;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-family: inherit;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: var(--transition);
  background: linear-gradient(135deg, var(--secondary-color) 0%, #a020f0 100%);
  color: white;
}

.danger-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
}

.icon-delete {
  display: inline-block;
  width: 16px;
  height: 16px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23ffffff'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16' /%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}
</style>
